<template>
<!-- html结构: 要就写在template里面,而且只能有一个根标签 -->
 <div>
  <h2>你好 vue</h2>
  <!-- 插值表达式,也叫大胡子,小胡子语法
        里面可以写JS代码 -->
  <p>姓名: {{uname.toUpperCase()+'李四'}}</p>
  <p>年龄: {{age > 20? '18' : age}} </p>
    <!-- v-html 和JS中 innerHTML效果一样 -->
  <p v-html="info"></p>
    <!-- v-text 和JS中 innerText效果一样 -->
  <p v-text="info"></p>
 </div>
</template>

<script>
// JavaScript

  export default{
    // 对象里可以写很多东西,比如data,methods,computed,watch,components....
    // data 用于储存数据: 写法上要求data定义成函数,函数里面返回一个对象,所有的数据都放到这个返回的对象中
    data () {
      return{
        uname:'lisi',
        age: 30 ,
        info:'这是一个<strong>漂亮</strong>的妹子'
      }

    }
    
  }


</script>

<style>
 /* css样式 */

</style>